<template>
  <div class="layout-container confidence-evaluate" v-loading="loading">
    <PageHeader title="试验样本数据管理">
      <template #btns>
        <div class="common-buttons">
          <el-button type="primary" @click="onStartConfidenceEvaluate">开始置信度评估</el-button>
        </div>

      </template>
      <template #search>
        <div class="search common-buttons">
          <el-input
            v-model="keyword"
            style="width: 320px"
            placeholder="请搜索"
            clearable
          ></el-input>
          <el-button
            type="primary"
            :icon="Search"
            @click="onQuery({ pageNo: 1 })"
            >查找</el-button
          >
        </div>
      </template>
    </PageHeader>

    <div class="layout-container-table">
      <CommonTable
        :data="state.tableData"
        v-model:page="page"
        :total="total"
        v-loading="loading"
        @onQuery="onQuery"
        @selection-change="onSelectChange"
      >
        <el-table-column prop="sampleName" label="试验样本名称" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column prop="confidenceFlag" label="置信度评估状态">
          <template #default="scope">
            <div
              class="evaluation-process"
              v-if="scope.row.confidenceFlag === '0'"
            >
              <div class="round" style="background: #3868fe"></div>
              <span style="color: #3868fe">未评估</span>
            </div>
            <div
              class="evaluation-process"
              v-if="scope.row.confidenceFlag === '1'"
            >
              <div class="round" style="background: rgba(22, 168, 49, 1)"></div>
              <span style="color: rgba(22, 168, 49, 1)">已评估</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评估详情">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="onLook(scope.$index, scope.row)"
              :disabled="scope.row.confidenceFlag === '0' ? true : false"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </CommonTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage, FormInstance, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import PageHeader from "@/components/page-header/index.vue";
import CommonTable from "@/components/common-table/index.vue";
import { Page } from "@/components/common-table/type";
import {
  httpConfidenceEvaluateList,
  httpStartEvaluate,
} from "@/api/antiJamPerformCalculateSystem";

let $router = useRouter();
const keyword = ref<string>("");
const state = reactive<any>({
  tableData: [],
});
const selectKeys = ref<string[]>([]);
const loading = ref<boolean>();
const evaluating = ref<boolean>();
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const total = ref<number>(0);

onMounted(() => {
  onQuery({ pageNo: 1 });
});

// 查询数据
const onQuery = (val: any) => {
  const params = {
    sampleName: keyword.value,
    sampleType: "1", // 0-原始样本，1-处理后样本
    sampleId: "",
    evaluationStage: "4",
    pageSize: page.pageSize,
    pageNo: page.current,
    ...val,
  };
  loading.value = true;
  httpConfidenceEvaluateList(params).then((res) => {
    const result = res.data;
    loading.value = false;
    const { rows, totalRows } = result;
    total.value = totalRows;
    state.tableData = rows;
    selectKeys.value = [];
  });
};

// 过滤出keys
const filterKeys = (arr: []) => {
  let keys: string[] = [];
  for (let item of arr) {
    keys.push(item.id);
  }
  return keys;
};

// 选择监听器
const onSelectChange = (val: []) => {
  selectKeys.value = filterKeys(val);
};

const toResverStr = (data: string[]) => {
  const str = data.join(",");
  return str;
};

// 开始置信度评估
const onStartConfidenceEvaluate = () => {
  if (!selectKeys.value.length) {
    ElMessage({
      message: "请选择评估的样本数据!",
      type: "warning",
    });
    return;
  }

  const sampleIds = toResverStr(selectKeys.value);
  loading.value = true
  httpStartEvaluate({ sampleIds }).then((res: any) => {
    loading.value = false
    const { code } = res;
    state.tableData.forEach((item: any) => {
      if (sampleIds.includes(item.id)) {
        item.confidenceFlag = "evaluating";
        evaluating.value = true;
        if (code === 200) {
          evaluating.value = false;
          item.confidenceFlag = "1";
        }
      }
    });
  });
};

// 数据查看
const onLook = (index: number, row: any) => {
  if (row.confidenceFlag === "0") {
    ElMessageBox.confirm("无法查看未评估详情, 请先评估再操作!", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).catch(() => {});
    return;
  }
  $router.push({
    path: "/antiJamPerformCalculateSystem/confidenceEvaluateResult",
    query: {
      sampleName: row?.sampleName,
      sampleId: row?.id,
    },
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/buttons";
.confidence-evaluate {
  .search {
    :deep() {
      .el-input--small .el-input__wrapper {
        margin-right: 10px;
      }
    }
  }
  .layout-container-table {
    .el-button--small {
      background: transparent;
      // color: rgba(24, 81, 237, 1);
      font-size: 13px;
    }
  }
  .evaluation-process {
    display: flex;
    cursor: pointer;
    .round {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      position: relative;
      top: 7px;
      right: 4px;
    }
  }
}
.el-button {
  background: rgb(1, 18, 90);
  border: 0;
}
</style>
